<template>
  <div class="content">
    <van-row class="container">
      <van-col span="24" class="item1">
        <div class="text1">
          <router-link to="/">

            <van-nav-bar
              title="全国疫情详情"
              left-text="返回"
              right-text="更多"
              left-arrow
              fixed:true
              class="text2"/>
          </router-link>
        </div>
      </van-col>
      <van-col span="24" class="item2">
      <template>
          <Vtable></Vtable>
        </template>
      </van-col>
      <van-col span="24" class="item3">
        <template>
          <fymap></fymap>
        </template>
      </van-col>
      <van-col span="24">
        <template>
          <line-chart></line-chart>
        </template>
      </van-col>
    </van-row>
    <!-- 底部选项卡 -->
   <my-tabbar></my-tabbar>
    <!-- <van-tabbar v-model="selected" fixed >
      <van-tabbar-item name="page" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item name="service" icon="like-o">云图</van-tabbar-item>
      <van-tabbar-item name="consult" icon="chat-o">咨询</van-tabbar-item>
      <van-tabbar-item name="me" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar> -->
  </div>
</template>
<script>
import LineChart from "./LineChart.vue";
import Vtable from "./Vtable.vue";
import { Toast } from "vant";
export default {
  components: { LineChart },
  components: { Vtable },
  data() {
    return {
      activeName: "a",
      selected: "service"
    };
  },
   watch: {
    // // 底部选项卡 selected改变时触发/** 监听selected的变化 一旦有变化 vue将会执行该方法 * 并且传入两个参数：从 oldval 更改newval */
    // selected(newVal) {
    //   if (newVal == "page") {
    //     this.$router.push("/");
    //   } else if (newVal == "service") {
    //     this.$router.push("/fymap");
    //   } else if (newVal == "consult") {
    //     this.$router.push("/mychat");
    //   } else if (newVal == "me") {
    //     this.$router.push("/mypage");
    //   }
    // },
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
  },
};
</script>
<style scoped>
.item3 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.content{
  margin-left:0.2rem;
  margin-right:0.2rem;
   padding-bottom: 1.6rem;
}
.text2{
 height: 2rem;
 line-height: 2rem;
 font-size: 1.5rem;

}

</style>